<template>
<div class="container">
  <!--用户头部信息  -->
  <div class="header">
    <img :src="userAvatar">
    <div class="user-info">
      <div class="user-name" v-text="userName"></div>
      <div class="user-id" v-text="userId"></div>
    </div>
    <van-icon name="setting-o"></van-icon>
  </div>
  <!-- 用户主体部分 -->
  <div class="main">
    <!-- 用户相关信息 -->
    <van-cell-group inset class="user-detail" >
      <van-cell>
        <van-grid :border="false">
          <van-grid-item :text="collectCount"><template #icon>收藏</template></van-grid-item>
          <van-grid-item :text="integral"><template #icon>积分</template></van-grid-item>
          <van-grid-item :text="couponCount"><template #icon>优惠</template></van-grid-item>
          <van-grid-item :text="now_money"><template #icon>余额</template></van-grid-item>
        </van-grid>
      </van-cell>
    </van-cell-group>
    <!-- 用户订单中心 -->
    <van-cell-group inset>
      <van-cell title="订单中心" value="查看全部" is-link to="order"/>
      <van-grid :column-num="5" :border="false">
        <van-grid-item icon="bill-o" text="待付款" badge="1" to="order" />
        <van-grid-item icon="tosend" text="代发货" badge="1" to="order" />
        <van-grid-item icon="logistics" text="待收货" badge="1" to="order" />
        <van-grid-item icon="comment-o" text="待评价" badge="1" to="order" />
        <van-grid-item icon="sign" text="已完成" badge="1" to="order"/>
      </van-grid>
    </van-cell-group>
  </div>
  <!-- 用户底部公共部分 -->
  <layout-footer></layout-footer>
</div>
</template>
<script setup>
import { CellGroup as VanCellGroup, Cell as VanCell, Grid as VanGrid,
  GridItem as VanGridItem, Icon as VanIcon } from 'vant'
import { getUserInfo } from "@/api/user"
import layoutFooter from '@/components/layoutFooter.vue'
import { computed, ref } from "vue";

// 用户数据存储
const userInfo = ref({})
// 用户头部信息的数据
const userAvatar = computed(() => userInfo.value?.switchUserInfo?.[0].avatar)
const userName = computed(() => userInfo.value?.nickname  || '')
const userId = computed(() => 'ID:' + ( userInfo.value?.uid  || ''))
// 用户信息部分的数据
const collectCount = computed(() => userInfo.value?.collectCount?.toString() || '')
const integral = computed(() => userInfo.value?.integral?.toString() || '')
const couponCount = computed(() => userInfo.value?.couponCount?.toString() || '')
const now_money = computed(() => userInfo.value?.now_money?.toString() || '')

// 用户信息初始化
const initUserInfo = async () =>{
  const { data } = await getUserInfo()
  // console.log(data)
  userInfo.value = data.data
}
initUserInfo()

</script>
<style lang='scss' scoped>
// 外部整体盒子
.container{
  padding: 15px 0;
  height: 600px;
  background: radial-gradient(circle at 50% -10%, #FBC546 72%, #F6F7F9 72%) #F6F7F9 0 -300px no-repeat;
}
// 头部信息
.header{
  padding: 0px 15px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .user-info{
    flex:1;
    padding: 0px 15px 10px;
    .user-name{
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 15px;
    }
    .user-id{
      font-size: 14px;
    }
  }
}
// 主体部分
.van-cell-group{
  margin-bottom: 10px;
}
.user-detail{
  .van-cell {
  padding: 0;
  min-height: 75px;
  }
}
</style>
